<template>
	<div class="application">
		<maining :tablist="tablist" :showi="showi" @ontab="ontab" title="联系我们">
			<template v-slot:main>
				<div v-show="showi==0" :style="{'padding':showMobile?'20px 15px':'60px 20px'}">
					<div class="is-bor is-m-b2" :style="{'width':showMobile?'340px':'530px','height':showMobile?'300px':'340px'}">
						<maping></maping>
					</div>
					<div style="line-height: 30px;">
						<p>天桦生物科技有限公司</p>
					
						<p>欢迎您的致电</p>
						<p>总部地址：黑龙江省孙吴县连桥二街9号院1号楼1层101-1</p>
						<p>咨询电话：132-0666-5005</p>
					</div>
				</div>
				<div v-show="showi==1" :style="{'padding':showMobile?'20px 15px':'60px 20px'}">
					<div v-if="!showMobile" class="flex-r is-m-b3">
						<div class="flex1">
							<input type="text" v-model="from.name" placeholder="您的姓名">
						</div>
						<div class="flex1 flex flex-j">
							<input type="text" v-model="from.email" placeholder="电子邮箱">
						</div>
						<div class="flex1 flex flex-end">
							<input type="text" v-model="from.mobile" placeholder="联系方式">
						</div>
					</div>
					<div v-if="showMobile" class="flex-c">
						<input type="text" class="is-wb"  v-model="from.name" placeholder="您的姓名">
						<input type="text" class="is-wb"  v-model="from.email" placeholder="电子邮箱">
						<input type="text" class="is-wb"  v-model="from.mobile" placeholder="联系方式">
					</div>
					<div>
						<input type="text" class="is-wb" v-model="from.content" placeholder="留言内容">
					</div>
					<div style="height: 40px;"></div>
					<div class="is-wb flex-c is-m-t2" style="height: 40px;">
						<button class="is-cur" @click="onbut">提交</button>
					</div>
				</div>

			</template>
		</maining>
	</div>
</template>

<script lang="ts" setup>
	import { ElMessage } from 'element-plus'
	import { service } from '@/request/http'
	import maping from '@/components/map.vue'
	import maining from '@/components/main.vue'
	import { storeToRefs } from 'pinia'
	import useAppStore from '@/store/modules/home'
	import { isMobile } from '@/utils/index'
	const store = storeToRefs(useAppStore())
	const showi = store.showi
	const from = reactive({
		name: '',
		email: '',
		mobile: '',
		content: ''
	})
	const tablist = ref([
		{
			name: '联系方式'
		},
		{
			name: '在线留言'
		}
	])
	const onbut = () => {
		service.post('/api/OnlineMessage/add', from).then(res => {
			// console.log('添加留言-------0', res.msg)
			if (res.msg != 'success'){
				ElMessage({
					message: res.msg,
					type: 'warning',
				})
			}else{
				ElMessage({
					message: '留言成功',
					type: 'success',
				})
			}
			
		})
	}
	const ontab = (i : any) => {
		showi.value = i
	}
	const showMobile = ref(null)
	onMounted(() => {
		showMobile.value = isMobile() //true 移动端 false pc
	})
</script>

<style lang="scss" scoped>
	input {
		width: 200px;
		-web-kit-appearance: none;
		-moz-appearance: none;
		border: 0;
		border-bottom: 1px solid #e3e3e3;
		outline: 0;
		padding: 20px 0;
	}

	button {
		background-color: $color;
		border: 0;
		width: 130px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: #fff;
		margin: 0 auto;
	}

	.application {
		.card {

			transition: 400ms;

			&:hover {
				transform: scale(1.1, 1.1);
			}
		}
	}
</style>